<template>
	<view class="logistics">
		<view class="logistics-plate-1">
			<image :src="goods_pic" mode=""></image>
			<view class="goods-info">
				<view class="item">
					<text>物流状态：</text>
					<text>{{goodsData.state}}</text>
				</view>
				<view class="item">
					<text>承运来源：</text>
					<text>{{goodsData.logistics_com}}</text>
				</view>
				<view class="item">
					<text>运单编号：</text>
					<text>{{goodsData.logistics_num}}</text>
				</view>
			</view>
		</view>
		<view class="logistics-plate-2">
			<u-time-line>
				<u-time-line-item v-for="(item,index) in pageData" :key="index">
					<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
					<template v-slot:content>
						<view>
							<view class="u-order-desc">{{item.context}}</view>
							<view class="u-order-time">{{item.ftime}}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
		<view class="is_null" v-if="pageData.length == 0">
			<u-empty text="还没有物流呢～" mode="address" img-width="460"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				pageData:[],
				goodsData:'',
				goods_pic:''
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getPageData()
		},
		methods:{
			// 请求物流信息
			getPageData(){
				uni.request({
				    url:this.$Url +'/index.php/App/Order/getDelivery',
				    method:'POST',
				    data:{
				       order_item_id:this.id
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.pageData = res.data.data.data
							this.goodsData = res.data.data
							this.goods_pic = this.$ImgUrl + res.data.data.goods_pic
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.logistics{
	width: 100vw;
	min-height: 100vh;
	background-color: #f7f7f7;
	.logistics-plate-1{
		padding: 30upx;
		background-color: #fff;
		display: flex;
		align-items: center;
		image{
			width: 135upx;
			height: 135upx;
			margin-right: 30upx;
		}
		.goods-info{
			.item{
				color: #333;
				font-size: 28upx;
				margin-bottom: 15upx;
			}
			.item:first-child{
				text:last-child{
					color: $zhuti-color;
				}
			}
		}
	}
	.logistics-plate-2{
		padding: 30upx;
	}
}
</style>
